<template>
  <div class="equipcontent">
    <!-- 设备显示 -->
    <div
      class="equip"
      :class="{ 'selectd-box': item.selected }"
      v-for="(item, index) in equipList.slice(
        (currentPage - 1) * pageSize,
        currentPage * pageSize
      )"
      :key="index"
      @click="handleEquipSetted(item, index)"
    >
      <div class="equipName">{{ item.cpdevname }}</div>
      <div>{{ item.bycurvol }}</div>
      <div class="equipstatus">
        <span>服务器状态 </span
        ><span>{{ EquipStateEnum[item.bycurstate] }}</span>
      </div>
    </div>

    <div class="equip2" v-for="(index, item) in number"></div>
  </div>

  <!-- 翻页 -->
  <div class="swap">
    <div class="demo-pagination-block">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        layout="prev, pager, next, jumper"
        :total="equipList.length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        @pagination=""
      />
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { getEquipListApi } from "../../../api/modules/login";
// import { getEquipListApi } from "gyzgb_axios_wapper";
import { EquipStateEnum } from "../../../utils/enum";
import { init, onmessage } from "../../../utils/ws";
const currentPage = ref(1); //当前页面
const pageSize = ref(56); //单页面显示多少个
const equipList = ref([]);
const totalPage = ref(0); //一共多少页
const remainder = ref(0); //余数
const router = useRouter();
const number = ref(0);

const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`);
  currentPage.value = val;
  console.log(" val", Number(val));
  console.log(" 一共多少页", totalPage.value);
  console.log(" 余数", remainder.value);

  if (currentPage.value == totalPage.value) {
    // 获取到最后一页需要添加的空盒子
    number.value = 56 - remainder.value;
  } else {
    number.value = 0;
  }

  // const res= equipList.value.slice( (currentPage - 1) * pageSize, currentPage * pageSize)
};

// const number=ref(1)

const handleSizeChange = (val) => {
  console.log(`每页 ${val} 条 `);
  pageSize.value = val;
};

const handleEquipSetted = (item, index) => {
  console.log(item);
  const boxSettedStyle = [...equipList.value];
  boxSettedStyle[(currentPage.value - 1) * 56 + index].selected =
    !boxSettedStyle[(currentPage.value - 1) * 56 + index].selected;
  equipList.value = boxSettedStyle;
};
onMounted(() => {
  init();
  getDeviceLists();

  onmessage(() => {
    console.log("1111");
    text();
    getDeviceLists();
  });
  // console.log("query:",router.currentRoute.value.query.data)
});

const getDeviceLists = async () => {
  try {
    const res = await getEquipListApi();
    equipList.value = res.data;

    if (equipList.value.length == 0) {
      number.value = 56;
    }

    remainder.value = equipList.value.length % pageSize.value;
    // 获取一共多少页
    totalPage.value = Math.ceil(equipList.value.length / pageSize.value);

    if (totalPage.value == 1) {
      number.value = 56 - remainder.value;
    }
  } catch (error) {}
};
</script>

<style lang="less" scoped>
@import "./fenquView.less";
</style>
